<template>
  <div class="details">
    <transition name="product">
      <div v-if="state" class="productDetail">
        <div class="left">
          <div class="name">{{ detailsData.name }}</div>
          <div class="price">售价￥{{ detailsData.current_price }}</div>
        </div>
        <div class="right">
          <img src="https://files.roborock.com/mini_img/product/cartIcon.png" alt="" @click="add">
          <div class="purchase" @click="buy">购买</div>
        </div>
      </div>
    </transition>
    <!-- 评论 -->
    <van-icon class="messagebtn" name="chat-o" @click="onmessage"/>
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">

      <div class="message-main">
        <div class="content-list" v-if="contentList.length>0">
          <div class="tiem" v-for="(item,index) in contentList" :key="index">
            <div class="phone">{{ item.phone }}</div>
            <div class="content">{{ item.content }}</div>
          </div>
        </div>
        <van-empty v-else description="还没有评论，请留下你宝贵的意见">
          <template #image>
            <van-icon class="comment-img" name="comment-o"/>
          </template>
        </van-empty>
        <van-field
          class="message-input"
          v-model="message"
          center
          clearable
          placeholder="请输入你的留言内容"
        >
          <template #button>
            <span @click="submitComments">提交</span>
          </template>
        </van-field>
      </div>
    </van-popup>
    <!-- 点赞 -->
    <div class="like">
      <van-badge :content="isLike.num>0?isLike.num:''">
        <van-icon name="like" :style="{color:isLike.state ? 'red' : '#ffffff'}" @click="onlike"/>
      </van-badge>
    </div>

    <!-- 收藏 -->
    <van-icon class="star" name="star" :style="{color:isCollectr.state ? 'orange' : '#ffffff'}" @click="onCollect"/>
    <img class="cross" src="https://files.roborock.com/mini_img/purchase/backIcon.png" @click="$router.back()" alt="">
    <div class="imgs" @scroll="onScroll">
      <img v-lazy="item" alt="" v-for="(item,index) in imgs" :key="index">
    </div>
  </div>
</template>

<script>
export default {
  name: "Details",
  data() {
    return {
      message: "",
      show: false,
      state: true,
      detailsData: {},
      imgs: [],
      scrollTop: 0,
      isLike: {state: false, id: '', num: 0},
      isCollectr: {state: false, id: ''},
      contentList: []
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {
    // 提交评论
    submitComments() {
      if (this.message !== "") {
        this.$ajax.addContent({
          phone: this.vuexUserInfo.user.mobile,
          goods_id: this.$route.params.id,
          content: this.message
        }).then(res => {
          // console.log(res)
          this.onmessage()
          this.message = ""
        })
      } else {
        this.$toast("请输入评论内容")
      }

    },
    // 打开留言弹出层
    onmessage() {
      if (this.vuexUserInfo.token) {
        this.show = true;
        this.$ajax.getContent({goods_id: this.$route.params.id}).then(res => {
          this.contentList = res
          // console.log(res)
        })
      } else {
        this.$toast("请先登录")
        this.gotoPage("login")
      }
    },
    // 点赞
    onlike() {
      if (this.vuexUserInfo.token) {
        if (this.isLike.state) {
          this.$ajax.delLike(this.isLike.id).then(res => {
            this.isLike.state = false
            this.getLike()
          })
        } else {
          this.$ajax.addLike({
            phone: this.vuexUserInfo.user.mobile,
            goods_id: this.detailsData.id
          }).then(res => {
            this.isLike.state = true
            this.getLike()
          })
        }
        // console.log(this.detailsData.id)
      } else {
        this.$toast("请先登录")
        this.gotoPage("login")
      }
    },
    // 点击收藏
    onCollect() {
      if (this.vuexUserInfo.token) {
        if (this.isCollectr.state) {
          this.$ajax.delCollect(this.isCollectr.id).then(res => {
            this.isCollectr.state = false
          })
        } else {
          this.$ajax.addCollect({
            phone: this.vuexUserInfo.user.mobile,
            goods_id: this.detailsData.id
          }).then(res => {
            this.isCollectr.state = true
          })
        }
      } else {
        this.$toast("请先登录")
        this.gotoPage("login")
      }
    },
    // 提交订单
    buy() {
      // console.log(this.detailsData)
      this.$router.push({
        name: 'confirm-order', query: {
          data:
            JSON.stringify([{
              goods_id: this.detailsData.id,
              cat_id: this.detailsData.category,
              name: this.detailsData.name,
              price: this.detailsData.current_price,
              num: 1,
              img: 'https://files.roborock.com/uploadImages/' + this.detailsData.default_photo,
            }])
        }
      })
    },
    // 滚动 动画
    onScroll(e) {
      this.state = e.target.scrollTop <= this.scrollTop;
      this.scrollTop = e.target.scrollTop
    },
    // 加入购物车
    add() {
      if (this.vuexUserInfo.token) {
        this.$ajax.addShoppingCart({
          amount: "1",
          product: this.detailsData.id,
          property: "[]"
        }).then(res => {
          if (res.error_code === 0) {
            this.$toast('加入购物车成功');
          } else {
            this.$toast(res.error_desc);
          }
          // console.log("添加购车", res)
        })
      } else {
        this.$toast('请先登录');
        this.gotoPage("login")
      }
    },
    // 获取收藏数据
    getCollect() {
      if (this.vuexUserInfo.token) {
        this.$ajax.getCollect({
          phone: this.vuexUserInfo.user.mobile,
        }).then(res => {
          let collectList = res.filter(item => item.goods_id === parseInt(this.$route.params.id))
          if (collectList.length > 0) {
            this.isCollectr.state = true
            this.isCollectr.id = collectList[0].id
          }
        })
      }
    },
    // 获取点赞数据
    getLike() {
      if (this.vuexUserInfo.token) {
        this.$ajax.getLike({
          goods_id: parseInt(this.$route.params.id)
        }).then(res => {
          if (res.filter(item => item.phone === this.vuexUserInfo.user.mobile).length > 0) {
            this.isLike = {
              state: true,
              id: res.filter(item => item.phone === this.vuexUserInfo.user.mobile)[0].id,
              num: res.length
            }
          } else {
            this.isLike.num = res.length
          }
        })
      }
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    this.getLike()
    this.getCollect()
    // 获取商品信息
    this.$ajax.detailsData({product: this.$route.params.id}).then(res => {
      if (res.error_code === 0) {

        this.detailsData = res.product
        // console.log(this.detailsData)
        // console.log(this.detailsData.self_properties[1].attrs[0].attr_name)
        // 获取详情图
        this.$ajax.detailsImg({name: this.detailsData.self_properties[1].attrs[0].attr_name}).then(res => {
          // console.log(res)
          // console.log(res.article.content)
          if (res.error_code === 0) {
            // 提取img的src
            res.article.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
              // console.log(capture)
              this.imgs.push(`https://files.roborock.com/uploadImages${capture}`)
            });
          } else {
            this.$toast(res.error_desc)
          }
          // console.log(this.imgs)
        })

      } else {
        this.$toast(res.error_desc)
      }

    })
  }
}
</script>

<style lang="scss" scoped>
.product-enter-active {
  animation: bounceInUp 1s;
}

.product-leave-active {
  animation: bounceOutDown 1s;
}

.details {
  position: relative;
  width: 100%;
  height: 100%;

  .message-main {
    .content-list {
      margin-bottom: 52px;

      .tiem {
        padding: 10px;
      }
    }

    ::v-deep.van-empty__image {
      width: 60px;
      height: 60px;
      font-size: 60px;
      margin: 100px 0 30px;
    }

    .message-input {
      background-color: #fafafa;
      position: fixed;
      left: 0;
      bottom: 0;
    }
  }


  .messagebtn {
    position: fixed;
    top: 10px;
    left: 15px;
    font-size: 22px;
    width: 30px;
    height: 30px;
    z-index: 99;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }

  .like {
    position: fixed;
    top: 10px;
    left: 95px;
    font-size: 22px;
    width: 30px;
    height: 30px;
    z-index: 99;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }

  .star {
    position: fixed;
    top: 10px;
    left: 55px;
    font-size: 22px;
    width: 30px;
    height: 30px;
    z-index: 99;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }

  img.cross {
    position: fixed;
    top: 10px;
    right: 15px;
    width: 30px;
    height: 30px;
    z-index: 99;
  }

  .imgs {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    img {
      width: 100%;
    }
  }

  .productDetail {
    position: fixed;
    bottom: 20px;
    left: 10px;
    right: 10px;
    box-sizing: border-box;
    padding: 20px 15px;
    border-radius: 20px;
    background-color: hsla(0, 0%, 100%, .7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: brightness(200%) saturate(180%) blur(20px);

    .left {
      width: 62%;

      .name {
        color: #4a4a4a;
        font-size: 16px;
        margin-bottom: 5px;
        font-weight: 700;
      }

      .price {
        color: #4a4a4a;
        font-size: 14px;
      }
    }

    .right {
      display: flex;

      img {
        width: 35px;
        height: 35px;
        padding: 0;
        margin-right: 10px;
      }

      .purchase {
        margin: 0;
        font-size: 14px;
        height: 35px;
        line-height: 35px;
        padding: 0 20px;
        border-radius: 17px;
        border: none;
        background-color: #f2f1f6;
        color: #007aff !important;
        font-family: HarmonyOSHansMedium;
      }
    }
  }
}
</style>